<template>
  <div class="container">
    <div class="table" v-loading="loading">
      <div ref="queryform" class="queryform">
        <div class="clearfix">
          <div class="left item">
            <label class="label-size">嫌疑人名称：</label>
            <el-input
                size="small"
                style="width:160px;"
                placeholder="请输入"
                v-model="formField.name"
            ></el-input>
          </div>
          <div class="left item">
            <label class="label-size">创建人：</label>
            <el-select
                clearable
                size="small"
                v-model="formField.createBy"
                placeholder="请选择"
                style="width:160px;"
            >
              <selectOptions
                  :options="
                    () =>
                      $api.api_urcap_auth_user({
                         pageSize:9999
                      })
                      .then(res => {
                        return res.data.records
                      })
                  "
                  :labelField="'userName'"
                  :valueField="'id'"
              >
              </selectOptions>
            </el-select>
          </div>
          <div class="right item">
            <el-button @click="resetSearch" size="small" icon="el-icon-refresh" class="default-btn">重置</el-button>
            <el-button @click="searchList" size="small" icon="el-icon-search" class="plain-btn">查询</el-button>
          </div>
        </div>
      </div>
      <div class="table-body">
        <el-table :data="tableData" :border="false" style="width: 100%" >
          <el-table-column prop="name" label="嫌疑人名称"></el-table-column>
          <el-table-column prop="nation" label="民族"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="degreeOfEducation" label="文化程度"></el-table-column>
          <el-table-column prop="work" label="职业"></el-table-column>
          <el-table-column prop="priorConvictions" label="是否有涉案前科"></el-table-column>
        </el-table>
        <div class="clearfix">
          <el-pagination
              style="text-align: center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageIndex"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import table from '@/mixins/table.js'
import {sandbox} from '@/libs/util'

export default {
  mixins: [table],
  data() {
    return {
      formField: sandbox({
        dateRange: [],
        name: '',
        timeBegin: '',
        timeEnd: '',
      }),
      tableData: [],
    }
  },
  methods: {
    LoadTableDataMethod() {
      this.formField.timeBegin = this.formField.dateRange?.length ? this.formField.dateRange[0] : ''
      this.formField.timeEnd = this.formField.dateRange?.length ? this.formField.dateRange[1] : ''
      return this.$api
          .api_urcap_baseInfoCriminalSuspect_queryPage({
            body: Object.assign(this.formField, this.pagination)
          })
          .then(res => {
            this.tableData = res.data.records
            this.pagination.currentPage = res.data.current
            this.pagination.pageSize = res.data.size
            this.pagination.total = res.data.total
          })
    },
    importMethod(form){
      return this.$api
          .api_urcap_baseInfoCriminalSuspect_upload({
            body: form
          })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
